<template>
  <div class="product-add">
    <!--form表单-->
    <el-form size="small" ref="form" :model="form" label-width="150px">
      <div class="common-form">商城後臺設置</div>
      <el-form-item
        label="商城系統名稱"
        :rules="[{ required: true, message: ' ' }]"
        prop="shopName"
      >
        <el-input
          v-model="form.shopName"
          placeholder="商城名稱"
          class="max-w460"
        ></el-input>
        <el-col class="tips">shop端商城名稱，顯示在登錄頁</el-col>
      </el-form-item>
      <el-form-item label="商城登錄背景" prop="shopBgImg">
        <el-input
          v-model="form.shopBgImg"
          placeholder="商城登錄背景"
          class="max-w460"
        ></el-input>
        <el-col class="tips">shop端商城登錄背景，不填則爲系統默認登錄背景，填寫網絡地址，建議尺寸2048*1280</el-col>
      </el-form-item>
      <el-form-item label="商城登錄Logo" prop="shopLogoImg">
        <el-input
          v-model="form.shopLogoImg"
          placeholder="商城登錄Logo"
          class="max-w460"
        ></el-input>
        <el-col class="tips">shop端商城登錄Logo，不填則爲系統默認登錄Logo，填寫網絡地址，建議尺寸540*500</el-col>
      </el-form-item>
      <el-form-item label="是否開啓登錄驗證碼">
        <div>
          <el-radio v-model="form.shopLoginCode" :label="true">開啓</el-radio>
          <el-radio v-model="form.shopLoginCode" :label="false">關閉</el-radio>
        </div>
      </el-form-item>
      <div class="common-form">商戶後臺設置</div>
      <el-form-item
        label="商戶系統名稱"
        :rules="[{ required: true, message: ' ' }]"
        prop="supplierName"
      >
        <el-input
          v-model="form.supplierName"
          placeholder="商戶系統名稱"
          class="max-w460"
        ></el-input>
        <el-col class="tips">商戶端名稱，顯示在登錄頁</el-col>
      </el-form-item>
      <el-form-item label="商戶登錄背景" prop="supplierBgImg">
        <el-input
          v-model="form.supplierBgImg"
          placeholder="商戶登錄背景"
          class="max-w460"
        ></el-input>
        <el-col class="tips">商戶端登錄背景，不填則爲系統默認登錄背景，填寫網絡地址</el-col>
      </el-form-item>
      <el-form-item label="商戶登錄Logo" prop="supplierLogoImg">
        <el-input
          v-model="form.supplierLogoImg"
          placeholder="商戶登錄Logo"
          class="max-w460"
        ></el-input>
        <el-col class="tips">商戶端登錄Logo，不填則爲系統默認登錄Logo，填寫網絡地址，建議尺寸540*500</el-col>
      </el-form-item>
      <el-form-item label="是否開啓登錄驗證碼">
        <div>
          <el-radio v-model="form.supplierLoginCode" :label="true"
            >開啓</el-radio
          >
          <el-radio v-model="form.supplierLoginCode" :label="false"
            >關閉</el-radio
          >
        </div>
      </el-form-item>
      <div class="common-form">運營後臺設置</div>
      <el-form-item
        label="商城運營名稱"
        :rules="[{ required: true, message: ' ' }]"
        prop="adminName"
      >
        <el-input
          v-model="form.adminName"
          placeholder="商城運營名稱"
          class="max-w460"
        ></el-input>
        <el-col class="tips">saas端商城運營名稱，顯示在登錄頁</el-col>
      </el-form-item>
      <el-form-item label="商城運營登錄背景" prop="adminBgImg">
        <el-input
          v-model="form.adminBgImg"
          placeholder="商城運營登錄背景"
          class="max-w460"
        ></el-input>
        <el-col class="tips">saas端商城運營登錄背景，不填則爲系統默認登錄背景，填寫網絡地址</el-col>
      </el-form-item>
      <el-form-item label="是否開啓登錄驗證碼">
        <div>
          <el-radio v-model="form.adminLoginCode" :label="true">開啓</el-radio>
          <el-radio v-model="form.adminLoginCode" :label="false">關閉</el-radio>
        </div>
      </el-form-item>
      <div class="common-form">客服後臺設置</div>
      <el-form-item
        label="客服系統名稱"
        :rules="[{ required: true, message: ' ' }]"
        prop="serviceName"
      >
        <el-input
          v-model="form.serviceName"
          placeholder="客服系統名稱"
          class="max-w460"
        ></el-input>
        <el-col class="tips">客服端名稱，顯示在登錄頁</el-col>
      </el-form-item>
      <el-form-item label="客服登錄背景" prop="supplierBgImg">
        <el-input
          v-model="form.serviceBgImg"
          placeholder="客服登錄背景"
          class="max-w460"
        ></el-input>
        <el-col class="tips">客服端登錄背景，不填則爲系統默認登錄背景，填寫網絡地址</el-col>
      </el-form-item>
      <el-form-item label="客服socket地址" prop="url">
        <el-input
          v-model="form.url"
          placeholder="客服請求"
          class="max-w460"
        ></el-input>
        <el-col class="tips">填寫格式爲 wss://socket.com,如果是小程序，請前往小程序添加域名</el-col>
      </el-form-item>
      <el-form-item label="是否開啓在線客服">
        <div>
          <el-radio v-model="form.serviceOpen" :label="true">開啓</el-radio>
          <el-radio v-model="form.serviceOpen" :label="false">關閉</el-radio>
        </div>
      </el-form-item>
      <div class="common-form">微信服務商支付設置</div>
      <el-form-item label="是否開啓服務商支付">
        <div>
          <el-radio v-model="form.weixinService.isOpen" :label="true"
            >開啓</el-radio
          >
          <el-radio v-model="form.weixinService.isOpen" :label="false"
            >關閉</el-radio
          >
        </div>
      </el-form-item>
      <template v-if="form.weixinService.isOpen">
        <el-form-item label="服務商戶號">
          <el-input
            v-model="form.weixinService.mchId"
            placeholder="服務商戶號"
            class="max-w460"
          ></el-input>
          <el-col class="tips">填寫服務商戶號、10位數字</el-col>
        </el-form-item>
        <el-form-item label="服務商支付祕鑰apiKey">
          <el-input
            v-model="form.weixinService.apiKey"
            placeholder="服務商支付祕鑰apiKey"
            class="max-w460"
          ></el-input>
          <el-col class="tips">填寫服務商戶支付祕鑰apiKey(僅支持V3)</el-col>
        </el-form-item>
        <el-form-item label="服務商appid">
          <el-input
            v-model="form.weixinService.appId"
            placeholder="服務商appid"
            class="max-w460"
          ></el-input>
          <el-col class="tips">填寫服務商戶號綁定的公衆號appid</el-col>
        </el-form-item>
        <el-form-item label="支付驗籤類型">
          <div>
            <el-radio v-model="form.weixinService.signType" :label=0
            >證書</el-radio
            >
            <el-radio v-model="form.weixinService.signType" :label=1
            >公鑰</el-radio
            >
          </div>
        </el-form-item>
        <el-form-item label="服務商序列號/公鑰ID">
          <el-input
            v-model="form.weixinService.serialNo"
            placeholder="服務商證書序列號serial"
            class="max-w460"
          ></el-input>
          <el-col class="tips">填寫服務商證書序列號/公鑰ID</el-col>
        </el-form-item>
        <template v-if="form.weixinService.signType===1">
          <el-form-item label="支付公鑰pub_key.pem">
            <el-input
              type="textarea"
              :rows="4"
              v-model="form.weixinService.publicKey "
              placeholder="使用文本編輯器打開pub_key.pem文件，將文件的全部內容複製進來"
              class="max-w460"
            ></el-input>
            <div class="tips">使用文本編輯器打開pub_key.pem文件，將文件的全部內容複製進來</div>
          </el-form-item>
        </template>
        <el-form-item label="apiclient_cert.pem">
          <el-input
            type="textarea"
            :rows="4"
            placeholder="使用文本編輯器打開apiclient_cert.pem文件，將文件的全部內容複製進來"
            v-model="form.weixinService.certPem"
            class="max-w460"
          ></el-input>
          <el-col class="tips"
            >使用文本編輯器打開apiclient_key.pem文件，將文件的全部內容複製進來</el-col
          >
        </el-form-item>
        <el-form-item label="apiclient_key.pem">
          <el-input
            type="textarea"
            :rows="4"
            placeholder="使用文本編輯器打開apiclient_cert.pem文件，將文件的全部內容複製進來"
            v-model="form.weixinService.keyPem"
            class="max-w460"
          ></el-input>
          <el-col class="tips"
            >使用文本編輯器打開apiclient_key.pem文件，將文件的全部內容複製進來</el-col
          >
        </el-form-item>
      </template>

      <!--文件上传设置-->
      <div class="common-form">文件上傳設置</div>
      <el-form-item label="最大圖片上傳">
        <el-input v-model="form.storageVo.maxImage" class="max-w460">
          <template #append>M</template>
        </el-input>
        <div class="tips">修改後請修改上傳配置後生效</div>
      </el-form-item>
      <el-form-item label="最大視頻上傳">
        <el-input v-model="form.storageVo.maxVideo" class="max-w460">
          <template #append>M</template>
        </el-input>
        <div class="tips">修改後請修改上傳配置後生效</div>
      </el-form-item>
      <el-form-item label="默認上傳方式">
        <div>
          <el-radio
            v-model="form.storageVo.current"
            label="Local"
            @change="getRadio"
            >本地 (不推薦)</el-radio
          >
          <el-radio
            v-model="form.storageVo.current"
            label="QiNiu"
            @change="getRadio"
            >七牛雲存儲</el-radio
          >
          <el-radio
            v-model="form.storageVo.current"
            label="AliYun"
            @change="getRadio"
            >阿里雲OSS</el-radio
          >
          <el-radio
            v-model="form.storageVo.current"
            label="QCloud"
            @change="getRadio"
            >騰訊雲COS</el-radio
          >
          <el-radio
            v-model="form.storageVo.current"
            label="HwCloud"
            @change="getRadio"
            >華爲雲OBS</el-radio
          >
        </div>
      </el-form-item>
      <!--七牛云存储-->
      <div v-if="form.storageVo.current == 'QiNiu'">
        <el-form-item label="存儲空間名稱 Bucket"
          ><el-input
            v-model="form.storageVo.qiNiu.bucket"
            class="max-w460"
          ></el-input
        ></el-form-item>
        <el-form-item label="ACCESS_KEY AK"
          ><el-input
            v-model="form.storageVo.qiNiu.accessKey"
            class="max-w460"
          ></el-input
        ></el-form-item>
        <el-form-item label="SECRET_KEY SK"
          ><el-input
            v-model="form.storageVo.qiNiu.secretKey"
            class="max-w460"
          ></el-input
        ></el-form-item>
        <el-form-item label="空間域名 Domain">
          <el-input
            v-model="form.storageVo.qiNiu.domain"
            class="max-w460"
          ></el-input>
          <div class="tips">請補全http:// 或 https://，例如：http://static.cloud.com</div>
        </el-form-item>
      </div>
      <!--阿里云OSS-->
      <div v-if="form.storageVo.current == 'AliYun'">
        <el-form-item label="存儲空間名稱 Bucket"
          ><el-input
            v-model="form.storageVo.aliYun.bucket"
            class="max-w460"
          ></el-input
        ></el-form-item>
        <el-form-item label="AccessKeyId"
          ><el-input
            v-model="form.storageVo.aliYun.accessKeyId"
            class="max-w460"
          ></el-input
        ></el-form-item>
        <el-form-item label="AccessKeySecret"
          ><el-input
            v-model="form.storageVo.aliYun.accessKeySecret"
            class="max-w460"
          ></el-input
        ></el-form-item>
        <el-form-item label="外網endpoint">
          <el-input
            v-model="form.storageVo.aliYun.endpoint"
            class="max-w460"
          ></el-input>
          <div class="tips">以杭州爲例：oss-cn-hangzhou.aliyuncs.com</div>
        </el-form-item>
        <el-form-item label="空間域名 Domain">
          <el-input
            v-model="form.storageVo.aliYun.domain"
            class="max-w460"
          ></el-input>
          <div class="tips">請補全http:// 或 https://，例如：http://static.cloud.com</div>
        </el-form-item>
      </div>
      <!--腾讯云COS-->
      <div v-if="form.storageVo.current == 'QCloud'">
        <el-form-item label="存儲空間名稱 Bucket"
          ><el-input v-model="form.storageVo.qcloud.bucket"></el-input
        ></el-form-item>
        <el-form-item label="所屬地域 Region">
          <el-input v-model="form.storageVo.qcloud.region"></el-input>
          <div class="tips">請填寫地域簡稱，例如：ap-beijing、ap-hongkong、eu-frankfurt</div>
        </el-form-item>
        <el-form-item label="SecretId"
          ><el-input v-model="form.storageVo.qcloud.secretId"></el-input
        ></el-form-item>
        <el-form-item label="SecretKey"
          ><el-input v-model="form.storageVo.qcloud.secretKey"></el-input
        ></el-form-item>
        <el-form-item label="空間域名 Domain">
          <el-input v-model="form.storageVo.qcloud.domain"></el-input>
          <div class="tips">請補全http:// 或 https://，例如：http://static.cloud.com</div>
        </el-form-item>
      </div>
      <!--华为云OBS-->
      <div v-if="form.storageVo.current == 'HwCloud'">
        <el-form-item label="存儲空間地區節點 Endpoint"
          ><el-input
            v-model="form.storageVo.hwCloud.endPoint"
            class="max-w460"
          ></el-input
        ></el-form-item>
        <el-form-item label="AccessKeyId"
          ><el-input
            v-model="form.storageVo.hwCloud.accessKeyId"
            class="max-w460"
          ></el-input
        ></el-form-item>
        <el-form-item label="AccessKeySecret"
          ><el-input
            v-model="form.storageVo.hwCloud.accessKeySecret"
            class="max-w460"
          ></el-input
        ></el-form-item>
        <el-form-item label="桶名稱 BucketName"
          ><el-input
            v-model="form.storageVo.hwCloud.bucketName"
            class="max-w460"
          ></el-input
        ></el-form-item>
        <el-form-item label="訪問域名 Domain">
          <el-input
            v-model="form.storageVo.hwCloud.domain"
            class="max-w460"
          ></el-input>
          <div class="tips">請補全http:// 或 https://，例如：http://static.cloud.com</div>
        </el-form-item>
      </div>

      <!--提交-->
      <div class="button-wrapper">
        <el-button
          size="large"
          type="primary"
          @click="onSubmit"
          :loading="loading"
          >提交</el-button
        >
      </div>
    </el-form>
  </div>
</template>

<script>
import SettingApi from "@/api/setting.js";
export default {
  data() {
    return {
      /*是否正在加载*/
      loading: false,
      /*form表单数据*/
      form: {
        weixinService: {},
        storageVo: {
          current: "Local",
          maxImage: "",
          maxVideo: "",
          qiNiu: {},
          aliYun: {},
          qcloud: {},
          hwCloud: {}
        }
      },
      hw: {
        endPoint: "",
        accessKeyId: "",
        accessKeySecret: "",
        bucketName: "",
        domain: ""
      }
    };
  },
  created() {
    this.getParams();
  },
  methods: {
    /*获取配置数据*/
    getParams() {
      let self = this;
      SettingApi.serviceDetail({}, true).then(res => {
        self.form = res.data;
        if (res.data.storageVo.hwCloud == null) {
          self.form.storageVo.hwCloud = self.hw;
        }
        self.loading = false;
      }).catch(error => {
        self.loading = false;
      });
    },
    /*提交*/
    onSubmit() {
      let self = this;
      let params = this.form;
      self.$refs.form.validate(valid => {
        if (valid) {
          self.loading = true;
          SettingApi.editService(params, true).then(data => {
            self.loading = false;
            ElMessage({
              message: "恭喜你，設置成功",
              type: "success"
            });
            self.$router.push("/setting/Index");
          }).catch(error => {
            self.loading = false;
          });
        }
      });
    }
  }
};
</script>

<style>
.tips {
  color: #ccc;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input[type="number"] {
  -moz-appearance: textfield;
}
.button-wrapper {
  display: flex;
}
</style>

